import React, { PureComponent } from 'react';
import { Row, Col } from 'antd';
import numeral from 'numeral';
import { ChartCard } from '@/components/Charts';

class TodayDashboard extends PureComponent {
  numeralCount = count => numeral(count).format('0,0');

  render() {
    const { todaySmsVo, loading } = this.props;
    return (
      <div style={{ paddingBottom: '20px' }}>
        <Row gutter={16}>
          <Col span={8}>
            <ChartCard
              title="今日发送短信数量"
              loading={loading}
              total={this.numeralCount(todaySmsVo.todaySmsCount)}
            />
          </Col>
          <Col span={8}>
            <ChartCard
              title="今日短信发送失败次数"
              loading={loading}
              total={this.numeralCount(todaySmsVo.todaySmsFailureCount)}
            />
          </Col>
          <Col span={8}>
            <ChartCard
              title="今日短信发送失败率"
              loading={loading}
              total={todaySmsVo.todaySmsFailureRatio}
            />
          </Col>
        </Row>
      </div>
    );
  }
}

export default TodayDashboard;
